<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item key="external" :label="$t('business.configuration.type')">
          <el-select
            v-model="row.object.target.type"
            style="width: 100%"
            @change="changeExternalType(row)"
          >
            <el-option value="Value" label="Value" />
            <el-option value="AverageValue" label="Average Value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          v-if="row.object.target.type === 'AverageValue'"
          :label="$t('business.configuration.quantity')"
        >
          <el-input
            v-model.number="row.object.target.averageValue"
            type="number"
            required
          />
        </el-form-item>
        <el-form-item
          v-if="row.object.target.type === 'Value'"
          :label="$t('business.configuration.quantity')"
        >
          <el-input
            v-model.number="row.object.target.value"
            type="number"
            required
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :label="$t('business.configuration.api_version')">
          <el-input v-model="row.object.describedObject.apiVersion" required />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="$t('business.configuration.kind')">
          <el-input v-model="row.object.describedObject.kind" required />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :label="$t('business.configuration.name')">
          <el-input v-model="row.object.describedObject.name" required />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item :label="$t('business.configuration.metrics_name')">
          <el-input v-model="row.object.metric.name" required />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <ko-metric-selector
        :match-expressions="row.object.metric.selector.matchExpressions"
      />
    </el-row>
  </div>
</template>

<script setup lang="ts">
import KoMetricSelector from "@/views/domain/kubeHud/views/components/ko-configuration/ko-metric-selector.vue";

const row = defineModel<any>("row");

const changeExternalType = row => {
  if (row.object.target.type === "AverageValue") {
    delete row.object.target.value;
    row.object.target.averageValue = 80;
  }
  if (row.object.target.type === "Value") {
    delete row.object.target.averageValue;
    row.object.target.value = 80;
  }
};
</script>

<style scoped></style>
